<template>
  <view class="login tn-safe-area-inset-bottom">
    <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false"
      >注册</tn-navbar
    >
    <view class="login-title">
      <span>欢迎注册</span>
    </view>
    <view class="login-content">
      <view class="login-content-item tn-flex-row">
        <tn-icon class="icon" icon="phone"></tn-icon>
        <tn-input
          class="login-input"
          placeholder="请输入手机号"
          type="number"
          :maxlength="11"
          v-model="phone"
        >
        </tn-input>
      </view>

      <view class="login-content-item tn-flex-row">
        <tn-icon class="icon" icon="phone-fill"></tn-icon>
        <tn-input
          class="login-input verif-code-input"
          placeholder="请输入验证码"
          type="number"
          :maxlength="6"
          v-model="verifCode"
        >
        </tn-input>
        <tn-button class="send-code" v-show="sendSmsCodeBtn" @click="sendCode"
          >获取验证码</tn-button
        >
        <tn-button class="send-code" v-show="!sendSmsCodeBtn"
          >倒计时：{{ countdown }}</tn-button
        >
      </view>

      <view class="login-content-item tn-flex-row">
        <tn-icon class="icon" icon="safe"></tn-icon>
        <tn-input
          class="login-input"
          placeholder="请输入密码"
          type="text"
          :maxlength="20"
          v-model="password"
        >
        </tn-input>
      </view>
      <!-- <view class="forget-password">
        <span class="forget-password-text" >忘记密码？</span>
      </view> -->
      <view class="login-content-item login-btn-view tn-bg-main tn-flex-row">
        <tn-button class="login-btn" type="primary" size="lg" @click="registerFun"
          >注册</tn-button
        >
      </view>

      <view class="user-agreement">
        <tn-checkbox-group v-model="userCheckbox">
          <tn-checkbox name="userGVRP" active-color="tn-bg-primary"
            >我已阅读<span>《用户协议》</span>和<span
              >《隐私政策》</span
            ></tn-checkbox
          >
        </tn-checkbox-group>
      </view>
      <view class="user-register">
        <span @click="toLogin()">已有账号，立即登录</span>
      </view>
    </view>
  </view>
  <tn-tips ref="defaultTips" :top="customNavbar.height + 'px'"></tn-tips>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useSystemInfo from "@/tuniao-ui/libs/hooks/useSystemInfo";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnInput from "@/tuniao-ui/components/tn-input/src/Input.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnCheckbox from "@/tuniao-ui/components/tn-checkbox/src/Checkbox.vue";
import TnCheckboxGroup from "@/tuniao-ui/components/tn-checkbox/src/CheckboxGroup.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnTips from "@/tuniao-ui/components/tn-tips/src/Tips.vue";
import { navPage } from "@/tuniao-ui/utils";
import { mobile, rangeLength } from "@/tuniao-ui/utils/testUtils";
import { ResultEnum } from "@/enums/httpEnum";
import { sendSmsCode, register } from "@/api/user";
import { getStorage } from "@/tuniao-ui/utils";
import { loading, closeLoading } from "@/tuniao-ui/utils/messageUtils";

const { customNavbar } = useSystemInfo();

const phone = ref<number>();
const verifCode = ref<number>();
const password = ref<string>("");
const sendSmsCodeBtn = ref<boolean>(true);
const countdown = ref<number>(60);

const defaultTips = ref<InstanceType<typeof TnTips>>();
let userCheckbox = ref<string[]>([]);

function toLogin() {
  navPage("/pages/mine/login");
}

function sendCode() {
  console.log(phone.value, password.value);
  if (!phone.value) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入手机号",
    });
    return;
  }
  if (!mobile(phone.value?.toString())) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入正确的手机号",
    });
    return;
  }
  let params = { phone: phone.value, scene : "register" };
  sendSmsCode(params).then((res) => {
    const { code, message: msg } = res;
    if (code == ResultEnum.SUCCESS) {
      defaultTips.value?.show({
        type: "success",
        msg: "短信发送成功",
      });
      // 发送按钮不显示
      sendSmsCodeBtn.value = false;
      countdown.value = 60;
      let timer = setInterval(() => {
        // 定时器设置每秒递减
        countdown.value--; // 递减时间

        if (countdown.value <= 0) {
          sendSmsCodeBtn.value = true; // 60s时间结束还原v-show状态并清除定时器
          clearInterval(timer);
        }
      }, 1000);

    } else {
      defaultTips.value?.show({
        type: "danger",
        msg: msg,
      });
    }
  });
}

function registerFun() {
  console.log(phone.value, password.value);
  if (!phone.value) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入手机号",
    });
    return;
  }
  if (!mobile(phone.value?.toString())) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入正确的手机号",
    });
    return;
  }

  if (!password.value) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入密码",
    });
    return;
  }

  if (!rangeLength(password.value, [6, 20])) {
    defaultTips.value?.show({
      type: "warning",
      msg: "密码长度在6~20之内",
    });
    return;
  }
  if (!userCheckbox.value[0]) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请先阅读用户协议和隐私政策",
    });
    return;
  }

  if (!verifCode.value) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入验证码",
    });
    return;
  }
  if (!rangeLength(verifCode.value.toString(), [6, 6])) {
    defaultTips.value?.show({
      type: "warning",
      msg: "验证码为6位数字",
    });
    return;
  }
  loading({title: "注册中..."});
  let params = {
    phone: phone.value,
    password: password.value,
    code: verifCode.value,
    inviteMemberNo: "",
  };

  let inviteMemberNo = getStorage("invite_member_no");
  if (inviteMemberNo != null) {
    params["inviteMemberNo"] = inviteMemberNo;
  }

  register(params).then((res) => {
    closeLoading();
    const { code, message: msg } = res;
    if (code == ResultEnum.SUCCESS) {
      defaultTips.value?.show({
        type: "success",
        msg: "注册成功，即将跳转登录页",
      });
      
      setTimeout(function () {
        toLogin();
      }, 2000);
    } else {
      defaultTips.value?.show({
        type: "danger",
        msg: msg,
      });
    }
  });
}

</script>

<style lang="scss" scoped>
uni-page-body,
#app {
  height: 100%;
}
.login {
  background-color: #fff;
  padding: 0 30rpx;
  height: 100%;
  .login-title {
    margin-top: 100rpx;
    font-size: 50rpx;
    font-weight: bold;
  }
  .login-content {
    margin-top: 150rpx;

    .login-content-item {
      margin-top: 60rpx;
      border: 1px solid #ccc;
      border-radius: 50rpx;
      padding: 0 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        font-size: 45rpx;
        color: #888;
      }

      .login-input {
        width: 100%;
        height: 100rpx;
        font-size: 25rpx;
      }
      .verif-code-input {
        width: 70%;
      }
      .send-code {
        width: 30%;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 25rpx;
        text-align: center;
        border: none;
        border-radius: 50rpx;
      }
    }

    .forget-password {
      margin-top: 20rpx;
      text-align: end;
    }
    .login-btn-view {
      margin-top: 100rpx;
      border: none;
      .login-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        text-indent: 20rpx;
        letter-spacing: 20rpx;
      }
    }
    .user-agreement {
      margin-top: 30rpx;
      text-align: center;
      span {
        font-weight: bold;
      }
    }
    .user-register {
      margin-top: 60rpx;
      text-align: center;
      span {
        margin: 0 20rpx;
      }
    }
  }
}
</style>
